<template>
  <a-modal
    v-model:open="open"
    :title="'模型发布'"
    :width="416"
    centered
    :after-close="reset"
    :ok-text="'创建'"
    :confirm-loading="confirmLoading"
    @ok="onOk"
  >
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-form-item name="taskType" label="任务类型">
        <a-select
          v-model:value="formState.taskType"
          placeholder="请选择模型"
          :options="ALGO_TYPE_OPTIONS"
          :get-popup-container="(triggerNode: any) => triggerNode.parentNode"
        />
      </a-form-item>
      <a-form-item>
        <template #label>模型<span class="required-star">*</span></template>
        <div class="flex gap-12">
          <div class="flex-1">
            <a-form-item name="modalName" :style="{ marginRight: '12px', flex: 1 }">
              <a-select
                v-model:value="formState.modelName"
                placeholder="请选择模型"
                :field-names="{ label: 'version', value: 'id' }"
                :options="modelOption"
                :get-popup-container="(triggerNode: any) => triggerNode.parentNode"
              />
            </a-form-item>
          </div>
          <div class="flex-1">
            <a-form-item
              name="modalNameInput"
              :rules="[
                { required: true, message: '请输入模型名称', trigger: 'change' },
                {
                  pattern: /^(?!\.)(\d+\.)*\d+$/,
                  message: '仅支持数字和小数点,且以数字结尾'
                }
              ]"
            >
              <a-input
                v-model:value="formState.modelNameInput"
                v-trim
                :disabled="!formState.modelName || formState.modelName !== 'add-model'"
                :maxlength="10"
                placeholder="例如：1.0.1"
              />
            </a-form-item>
          </div>
        </div>
      </a-form-item>
      <a-form-item>
        <template #label>版本号<span class="required-star">*</span></template>
        <div class="flex gap-12">
          <div class="flex-1">
            <a-form-item name="versionName" :style="{ marginRight: '12px', flex: 1 }">
              <a-select
                v-model:value="formState.versionName"
                placeholder="请选择版本号"
                :field-names="{ label: 'version', value: 'id' }"
                :options="versionOption"
                :get-popup-container="(triggerNode: any) => triggerNode.parentNode"
              />
            </a-form-item>
          </div>
          <div class="flex-1">
            <a-form-item
              name="versionInput"
              :rules="[
                { required: true, message: '请输入版本号名称', trigger: 'change' },
                {
                  pattern: /^(?!\.)(\d+\.)*\d+$/,
                  message: '仅支持数字和小数点,且以数字结尾'
                }
              ]"
            >
              <a-input
                v-model:value="formState.versionInput"
                v-trim
                :disabled="!formState.versionName || formState.versionName !== 'add-version'"
                :maxlength="10"
                placeholder="例如：1.0.1"
              />
            </a-form-item>
          </div>
        </div>
      </a-form-item>
      <a-form-item label="描述" name="description">
        <a-textarea v-model:value="formState.description" placeholder="请输入描述" :maxlength="200" :show-count="true" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import type { FormInstance } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  // import { cloneDeep } from 'g6-fn'
  import { computed, ref } from 'vue'

  import { mirrorManageApi } from '@/services/api'

  // import { validateBitLen, validateDirName } from '@/utils'
  import { ALGO_TYPE_OPTIONS } from '../../algo-dev/options'

  export interface Props {
    afterCloseFn?: () => void
  }

  const props = withDefaults(defineProps<Props>(), {
    afterCloseFn: () => {}
  })

  interface FormState {
    id?: string
    taskType?: string
    modelName?: string
    modelNameInput: string
    versionInput: string
    versionName?: string
    description: string
  }

  const open = ref(false)
  const formRef = ref<FormInstance>()
  const formState = ref<FormState>({
    taskType: undefined,
    modelName: undefined,
    modelNameInput: '',
    versionInput: '',
    versionName: undefined,
    description: ''
  })

  const modelOption = ref<any[]>([{ id: 'add-model', version: '新增模型' }])
  const versionOption = ref<any[]>([{ id: 'add-version', version: '新增版本' }])

  const rules: Record<string, Rule[]> = {
    taskType: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
    versionName: [{ required: true, message: '请选择版本号', trigger: 'change' }],
    modalName: [{ required: true, message: '请选择模型', trigger: 'change' }]
  }
  const confirmLoading = ref(false)
  const onOk = async () => {
    await formRef.value?.validateFields()
    props.afterCloseFn()
    console.log('表单', mirrorManageApi)
  }

  const reset = () => {
    formRef.value?.resetFields()
    formState.value = {
      taskType: undefined,
      modelName: undefined,
      modelNameInput: '',
      versionInput: '',
      versionName: undefined,
      description: ''
    }
  }

  defineExpose({
    open: () => {
      open.value = true
    }
  })
</script>

<style lang="less" scoped>
  .dress-input {
    :deep(input) {
      border-radius: 0 6px 6px 0 !important;
    }
  }

  .required-star {
    display: inline-block !important;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    color: rgba(25, 25, 48, 0.75);
    font-weight: 700;
    line-height: 1;
    margin-inline: 2px 8px;
    transform: translateY(-1px);
  }
</style>
